<template>
	<div>
		<div class="common_form_search">
			<el-form ref="searchForm" :inline="true" :model="searchForm">
				<el-form-item label="手机号">
					<el-input v-model="searchForm.mobile" placeholder="请输入手机号" clearable />
				</el-form-item>
				<el-form-item label="昵称">
					<el-input v-model="searchForm.nick_name" placeholder="请输入昵称" clearable />
				</el-form-item>
				<el-form-item label="vip等级 ">
					<el-input v-model="searchForm.level_id" placeholder="请输入vip等级" clearable />
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" @click="search()">查询</el-button>
					<el-button size="small" @click="reset()">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-divider />
		<div class="flex align-center table-top-btns">
			<h5 class="flex align-center">
				<svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
			</h5>
		</div>
		<el-table v-show="tableData.length > -1" class="tableBox" :data="tableData" border>
			<el-table-column align="center" prop="id" label="ID" />
			<el-table-column align="center" prop="mobile" label="手机号"/>
			<el-table-column align="center" prop="nick_name" label="昵称" />
			<el-table-column align="center" prop="level_id" label="vip等级" width="100" />
			<el-table-column align="center" prop="gender" label="性别" >
				<template slot-scope="scope">
					{{scope.row.gender==0?'男':'女'}}
				</template>
			</el-table-column>
			<el-table-column align="center" prop="expend_money" label="消费金额" sortable />
			<el-table-column align="center" prop="refund_money" label="退款金额" sortable />
			<el-table-column align="center" prop="balance" label="所有余额" sortable />
			<el-table-column align="center" label="操作" width="200">
				<template slot-scope="scope">
					<!-- <el-button type="primary" size="mini"
						@click="$router.push({ name: 'saleView', params: { viewId: scope.row.sale_user_id } })">查看
					</el-button>
					<el-button type="primary" size="mini"
						@click="handleCheck(scope.row.id)">待审核</el-button>
					<el-dropdown @command="command => handleMore(command, scope.row)">
						<span class="el-dropdown-link blue-font pointer" style="margin-left:10px">
							更多操作<i class="el-icon-arrow-down el-icon--right" />
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="edit">编辑资料</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown> -->
				</template>
			</el-table-column>
		</el-table>
		<custom-page ref="customPage" :total="total" :page-size="pageSize" @getList="getList" />
		<check-dialog ref="checkDialog" :check-id="checkId" @getList="getList" />
	</div>
</template>

<script>
	import { getMemberList } from '@/api/user'
	import customPage from '@/components/customPage'
	import checkDialog from './components/checkDialog'
	export default {
		components: {
			customPage,
			checkDialog
		},
		props: {
			shopname: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				searchForm: {
					mobile: '',
					nick_name: '',
					level_id: '',
					memberCreateTime:''
				},
				total: 0,
				tableData: [],
				routerName: '',
				checkId: '',
        pageSize:50
			}
		},
		created() {
			if (this.$route.query.shopname) {
				this.routerName = this.$route.query.shopname
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			handleMore(command, item) {
				if (command === 'edit') {
					// 编辑资料
					this.$router.push({
						name: 'saleView',
						params: {
							viewId: item.id,
							toEdit: true
						}
					})
				} else {
					// 查看备注
				}
			},
			// 查询
			search() {
				this.$refs.customPage.page = 1
				this.getList()
			},
			// 重置
			reset() {
				this.searchForm = {
					shopname: '',
					account_num: '',
					status: null
				}
				this.routerName = ''
				this.getList()
			},
			handleCheck(item) {
				this.checkId = item
				this.$refs.checkDialog.dialogVisible = true
				console.log(item);
			},
			// 启用/禁用
			enable(id, endisable) {
				// editSupplier({
				// 	id,
				// 	endisable: endisable === 1 ? 2 : 1
				// }).then(res => {
				// 	this.getList(true)
				// })
			},
			getList(flag) {
				// flag为true, 则不刷新表格
				const {
					page,
					pageSize
				} = this.$refs.customPage
				if (!flag) {
					this.tableData = []
				}
				this.searchForm.shopname = this.searchForm.shopname || this.routerName
				const params= {
					mobile:this.searchForm.mobile,
					nick_name:this.searchForm.nick_name,
					level_id:this.searchForm.level_id,
					memberCreateTime:this.searchForm.memberCreateTime,
					page,
					pageSize:this.pageSize
				}
				getMemberList(params).then(res=>{
					console.log(res);
					this.tableData = res.list.data || []
					this.total = res.list.total
				})
			}
		},
		beforeRouteEnter(to, from, next) {
			if (from.name === 'supplierView') {
				next(vm => {
					vm.getList()
				})
			} else {
				next()
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
